<template>
<div class="home">
    <banner isHome="true" id="home"></banner>
    <div class="animate">
        <!--关于我-->
        <about-me class="sectionBox" id="adoutMe"></about-me>
        <!-- 技能 -->
        <my-skills class="sectionBox" id="mySkills"></my-skills>
        <!--项目-->
        <my-works class="sectionBox" id="myWorks"></my-works>

        <banner class="motto" :src="require('@/assets/images/showcase-bg.jpg')">
            <div class="container">
                <h3>如果你有梦想就必须去捍卫它</h3>
                <p>
                    You got a dream,<br />
                    you gotta pretect it
                </p>
            </div>
        </banner>
        <!--项目经验-->
        <Experience class="sectionBox" id="Experience"></Experience>
        <!--加载更多-->
        <div class="more">
            <a class="more-btn" :href="downloadUrl + 'resume.pdf'" download="求职简历-前端开发工程师-陈巧敏.pdf">下载简历</a>
        </div>
        <!--联系方式-->
        <Contact class="sectionBox" id="Contact"></Contact>
    </div>
</div>
</template>

<script>
import Banner from "@/components/banner";
import sectionTitle from "@/components/section-title";
import AboutMe from "./AboutMe";
import MySkills from "./MySkills";
import MyWorks from "./MyWorks";
import Experience from "./Experience";
import Contact from "./Contact";

export default {
    name: "Home",
    data() {
        return {
            downloadUrl: process.env.BASE_URL,
        };
    },
    components: {
        Banner,
        sectionTitle,
        AboutMe,
        MySkills,
        MyWorks,
        Experience,
        Contact,
    },
    methods: {},
};
</script>

<style lang="less" scoped>
.home-banner.motto {
    .container {
        padding: 80px 0;
        text-align: center;
        color: #fff;
        font-size: 24px;

        h3 {
            display: inline-block;
            padding: 15px;
            margin: 0 auto 20px;
            font-size: 28px;
            border: 1px solid #fff;
            color: #fff;
        }
    }
}

.more {
    margin-bottom: 50px;

    .more-btn {
        display: block;
        width: 100px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        color: #adadad;
        border: 1px solid #adadad;
        border-radius: 20px;
        margin: 0 auto;
        cursor: pointer;

        &:hover {
            color: rgba(73, 119, 194, 1);
            border: 1px dashed rgba(73, 119, 194, 1);
        }
    }
}
</style>
